<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>随机点名</title>
    <style>
      .container {
        width: 500px;
        height: 300px;
        border: 1px dashed #333;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding-top: 50px;
      }
      .name-display {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 100px;
      }
      #start-stop-btn {
        width: 150px;
        height: 50px;
        background-color: #3498db;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="name-display" id="nameDisplay">点击开始点名</div>
      <button id="start-stop-btn">开始点名</button>
    </div>

    <script>
      var students = ["张三", "李四", "王五"];
      var nameDisplay = document.getElementById("nameDisplay");
      var startStopBtn = document.getElementById("start-stop-btn");
      var flag = false;
      var timer;

      startStopBtn.onclick = function () {
        if (!flag) {
          // 将标志变量置为true，表示进入点名状态
          flag = true;
          startStopBtn.innerHTML = "停止点名";
          // 启动定时器，每100ms随机选取一个名字显示
          timer = setInterval(pickRandomName, 100);
        } else {
          // 将标志变量置为false，表示停止点名
          flag = false;
          startStopBtn.innerHTML = "开始点名";
          // 清除定时器，停止随机选取名字
          clearInterval(timer);
        }
      };

      // 随机选取名字的函数
      function pickRandomName() {
        var randomIndex = Math.floor(Math.random() * students.length);
        var randomName = students[randomIndex];
        nameDisplay.textContent = randomName;
      }
    </script>
  </body>
</html>
